<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  @keyframes move1 {
    0% {
      transform: translateX(-500px) scaleX(2.5);
    }

    100% {
      transform: translateX(0) scaleX(2.5);
    }
  }

  @keyframes move2 {
    0% {
      transform: translateX(-600px) scaleX(3);
    }

    100% {
      transform: translateX(0) scaleX(3);
    }
  }

  @keyframes move3 {
    0% {
      transform: translateX(-800px) scaleX(4);
    }

    100% {
      transform: translateX(0) scaleX(4);
    }
  }

  #wave1 {
    animation: move1 2s linear infinite;
  }

  #wave2 {
    animation: move2 1.7s linear infinite;
  }

  #wave3 {
    animation: move3 2s linear infinite;
  }

  svg {
    display: block;
  }
</style>

<body>
  <section>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="300px">
      <defs>
        <g id="whole" fill-opacity="0.3" fill="pink">
          <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
             c50,50,100,0,100,0v200H0V200z"></path>
          <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
             c50,50,100,0,100,0v200H0V200z"></path>
          <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
             c50,50,100,0,100,0v200H0V200z"></path>
        </g>
      </defs>
      <use xlink:href="#whole" opacity="1"></use>
    </svg>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="300px">
      <defs>
        <g id="whole1" fill-opacity="1" fill="orange" mask="url(#mask)">
          <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
          <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
          <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
          <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
        </g>
        <text id="text" transform="translate(100,290)" font-size="150" font-weight="600">SUSU</text>
        <mask id="mask">
          <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
        </mask>
      </defs>
      <use xlink:href="#whole1" opacity="1"></use>
    </svg>

  </section>


</body>

</html>